<template>
	<!--<div>-->
	<div class="dian">
		<div class="right">
			<div class="favourite">
				<a name="remen_one"><p>热门</p></a>
				<ul class="qcfd">
					<li v-if="index>0 && index<5" v-for="item,index in src" @click="xinG2(index)">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
				<a name="two_one"><p>下午</p></a>
				<ul class="qcfd">
					<li v-if="index>16 && index<=19" v-for="item,index in src">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
				<a name="thre_one"><p>最近</p></a>
				<ul class="qcfd">
					<li v-if="index>19 && index<=25" v-for="item,index in src">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
				<a name="four_one"><p>情感</p></a>
				<ul class="qcfd">
					<li v-if="index>25 && index<=30" v-for="item,index in src">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
				<a name="five_one"><p>主题</p></a>
				<ul class="qcfd">
					<li v-if="index>30 && index<=32" v-for="item,index in src">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
				<a name="six_one"><p>场景</p></a>
				<ul class="qcfd">
					<li v-if="index>33 && index<=40" v-for="item,index in src">
						<img :src="item.thumb" alt="">
						<span :type="item.name">{{item.name}}</span>
						<div class="tin" :type="item.channelid">{{item.channelid}}0万</div>
						<div class="erji"><img src="../images/erji.png" alt=""></div>
					</li>
				</ul>
			</div>
		</div>
		<div class="left">
			<ul class="two">
				<a href="#remen_one">
					<li style="color: red">热门</li>
				</a>
				<a href="#two_one">
					<li>下午</li>
				</a>
				<a href="#thre_one">
					<li>最近</li>
				</a>
				<a href="#four_one">
					<li>情感</li>
				</a>
				<a href="#five_one">
					<li>主题</li>
				</a>
				<a href="#six_one">
					<li>场景</li>
				</a>
				<li>语种</li>
				<li>曲风</li>
				<li>人群</li>
				<li>乐器</li>
				<li>地区</li>
				<li>FM</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import jsonp from "jsonp"
	export default {
		name: "dian",
		data() {
			return {
				src: [""],
			}
		},
		mounted(){
            $(".two li").on("click",function () {
                $("li").css("color","#020202")
                $(this).css("color","red")
            });
        },
		created() {
			var nowTime = new Date().getTime();
            if(sessionStorage.src){
                var tem = JSON.parse(sessionStorage.src);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000) {//判断存储信息的时间和当前时间的距离是否小于1小时
                    //如果电影信息已经存在了sessionStroage里面就直接获取，否则进行ajax请求获取
                    this.src = tem.data;
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.radio.getCategoryList&format=json", null, (err, res) => {
				if(err) {
					console.log(err);
					if(tem){
                        this.src = tem.data;//如果请求失败就用之前存储的值
                    }
				} else {
                    sessionStorage.src = JSON.stringify({//把json对象格式转化为字符串
                        "data":res.result[0].channellist,
                        "expir":new Date().getTime()
                    });
					console.log(res);
					this.src = res.result[0].channellist;
				}
			})
		},
	}
</script>
<style scoped lang="scss">
	body,
	html {
		height: 100%;
		overflow: hidden;
	}
	
	.dian {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.di {
			width: 100%;
			height: 9%;
			position: fixed;
			left: 0;
			bottom: 0px;
		}
		.to {
			width: 100%;
			height: 20%;
			background: red;
			position: fixed;
			top: 0;
			left: 0;
		}
		.right {
			width: 66%;
			height: 100%;
			margin-right: 4%;
			position: fixed;
			left: 30%;
			overflow: auto;
			.favourite {
				width: 100%;
				padding-bottom: 70%;
				position: relative;
				p {
					text-align: center;
					color: #808080;
					margin-bottom: 5%;
					margin-top: 3%;
					font-size: 16px;
				}
				ul {
					width: 100%;
					li {
						margin-right: 3%;
						margin-bottom: 3%;
						width: 48%;
						padding-bottom: 48%;
						overflow: hidden;
						position: relative;
						float: left;
						img {
							width: 100%;
							position: absolute;
						}
						span {
							position: absolute;
							left: 50%;
							bottom: 20%;
							transform: translate(-50%);
							font-size: 50%;
							color: white;
						}
						.tin {
							position: absolute;
							left: 30%;
							bottom: 5%;
							font-size: 12px;
							color: white;
						}
						.erji {
							width: 30px;
							height: 20px;
							position: absolute;
							left: 7%;
							bottom: 3%;
							img {
								width: 60%;
							}
						}
						&:nth-child(2n) {
							margin-right: 0;
						}
					}
				}
			}
		}
		.left {
			width: 30%;
			height: 70%;
			float: left;
			position: fixed;
			left: 0;
			overflow: auto;
			.two {
				width: 100%;
				li {
					width: 100%;
					text-align: center;
					font-size: 17px;
					color: #020202;
					padding-top: 30%;
					padding-bottom: 5%;
				}
			}
		}
	}
	
	.qcfd::after {
		content: "";
		width: 100%;
		display: block;
		clear: both;
	}
</style>